<template>
  <view class="withdrawal">
    <form @submit="formSubmit">
      <view class="uni-form-item uni-column">
        <view class="title">账号类型</view>
        <uni-data-select class="onselect" :clear="false" v-model="withdrawal.cate" :localdata="range"></uni-data-select>
      </view>
      <view class="" v-if="withdrawal.cate == 10">
        <view class="uni-form-item uni-column">
          <view class="title">银行名称</view>
          <input class="uni-input" v-model="withdrawal.bank" name="bank" placeholder="请输入银行名称" />
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">开户行名称</view>
          <input class="uni-input" v-model="withdrawal.name" name="name" placeholder="请输入开户行名称" />
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">银行卡号</view>
          <input class="uni-input" v-model="withdrawal.account" name="account" placeholder="请输入银行卡号" />
        </view>
      </view>

      <view class="" v-else>
        <view class="uni-form-item uni-column" style="border: none">
          <view class="title">账户名称</view>
          <input class="uni-input" v-model="withdrawal.name" name="name" placeholder="请输入账户名称" />
        </view>
        <view class="uni-form-item uni-column" style="
            padding: 0 30rpx;
            text-align: center;
            justify-content: end;
            color: red;
            font-size: 22rpx;
          ">仅便于区分账户，随意填写</view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">是否默认</view>
        <switch name="isDefault" :checked="withdrawal.isDefault" style="transform: scale(0.7)" />
      </view>
      <view class="uni-form-item uni-column" v-if="withdrawal.cate != 10">
        <view class="title">二维码截图</view>
        <img src="@/static/images/updata.png" alt="" @click="addimg" style="height: 40rpx" />
      </view>
      <view class="imglist">
        <view class="imgbox" v-if="linkUrl">
          <img :src="linkUrl" alt="" style="height: 400rpx;width: 400rpx;" @click="addimg" />
        </view>
        <progress :percent="progress" stroke-width="3" v-if="progress && progress != 100" />
      </view>
      <button class="button" form-type="submit">提交</button>
      <button class="button" @click="deleteaccount" v-if="withdrawal.id">删除账号</button>
    </form>
  </view>
</template>

<script setup lang="ts">
  import { onShow } from '@dcloudio/uni-app'
  import {
    addwithdrawal,
    getwithdrawalinfo,
    updatewithdrawal,
    deletewithdrawal,
    gettoken
  } from '@/services/home'
  import * as qiniu from 'qiniu-js'
  import { ref } from 'vue'
  const withdrawal = ref({
    id: '',
    bank: '',
    name: '',
    account: '',
    isDefault: '',
    cate: 30,
  })

  const linkUrl = ref('' as any)
  const progress = ref(0 as any)

  const range = ref([
    // { value: 10, text: '银行卡' },
    { value: 20, text: '支付宝' },
    { value: 30, text: '微信' },
  ])
  const uploaddata = ref({
    token:'',
    key:''
  })
  const subscription = ref(null as any)
  const addimg = () => {
    uni.chooseImage({
      count: 1,
      success: async (chooseImageRes) => {
        if(subscription.value){
          subscription.value.unsubscribe()
        }
        const tempFilePaths = chooseImageRes.tempFiles
        const res = await gettoken({fileName:tempFilePaths[0].name})
        if(res.success){
          uploaddata.value = {...res.data}
        }
        uploadImageToQiniu(tempFilePaths[0]);
      },
    })
  }
  const uploadImageToQiniu = (filePath : any) => {
    const observer = {
      next(res: any){
        progress.value = res.total.percent
      },
      error(err: any){
        console.log(err)
      },
      complete(res: any){
        linkUrl.value = res.data.linkUrl
      }
    }
    const observable = qiniu.upload(filePath, uploaddata.value.key,uploaddata.value.token);
    subscription.value = observable.subscribe(observer)
  }

  const deleteaccount = async () => {
    uni.showModal({
      title: '提示',
      content: '确定要删除此账号？',
      success: async function (result) {
        if (result.confirm) {
          const res = await deletewithdrawal({ id: withdrawal.value.id })
          if (res.success) {
            uni.showToast({
              title: '删除成功',
              icon: 'none',
            })
            setTimeout(() => {
              uni.redirectTo({
                url: '/pagesMember/withdrawal-account/withdrawal',
              })
            }, 1000)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        }
      },
    })
  }
  const formSubmit = async (e : any) => {
    if(progress.value !== 0 && progress.value !==100){
      uni.showToast({
        title: '图片正在上传，请耐心等待一下',
        icon: 'none',
      })
      return
    }
    if (withdrawal.value.id) {
      e.detail.value.qrUrl = linkUrl.value
      e.detail.cate = withdrawal.value.cate
      if (!linkUrl.value && e.detail.cate != 10) {
        uni.showToast({
          title: '请上传二维码',
          icon: 'none',
        })
        return
      }
      e.detail.value.id = withdrawal.value.id
      const res = await updatewithdrawal(e.detail.value)
      if (res.success) {
        uni.showToast({
          title: '修改成功',
          icon: 'none',
        })
        setTimeout(() => {
          uni.redirectTo({
            url: '/pagesMember/withdrawal-account/withdrawal',
          })
        }, 1000)
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      }
    } else {
      e.detail.value.qrUrl = linkUrl.value
      e.detail.value.cate = withdrawal.value.cate
      if (!linkUrl.value && e.detail.cate != 10) {
        uni.showToast({
          title: '请上传二维码',
          icon: 'none',
        })
        return
      }
      const res = await addwithdrawal(e.detail.value)
      if (res.success) {
        uni.showToast({
          title: '添加成功',
          icon: 'none',
        })
        setTimeout(() => {
          uni.redirectTo({
            url: '/pagesMember/withdrawal-account/withdrawal',
          })
        }, 1000)
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      }
    }
  }
  const getinfo = async (id : any) => {
    const res = await getwithdrawalinfo({ id: id })
    if (res.success) {
      withdrawal.value = res.data
      linkUrl.value = res.data.qrUrl
    }
  }
  onShow(async () => {
    const currentPage = getCurrentPages().pop()
    const id = currentPage.$page.options.id
    if (id) {
      uni.setNavigationBarTitle({
        title: '修改账号',
      })
      getinfo(id)
    }
  })
</script>

<style lang="scss" scoped>
  .imglist {
    background-color: #fff;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;

    .imgbox {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      color: #999;

      view {
        white-space: nowrap;
        /* 强制文本在一行显示 */
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        text-overflow: ellipsis;
        width: 80%;
      }
    }
  }

  .uni-select {
    border: none !important;
  }

  .onselect::v-deep .uni-select {
    text-align: right;
    border: none !important;
    /* 去掉边框 */
    box-shadow: none !important;
    /* 去掉阴影 */
  }

  .uni-form-item {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    input {
      text-align: right;
      font-size: 24rpx;
    }
  }

  .arrow::after {
    content: '\e6c2';
    position: absolute;
    right: 0rpx;
    top: 50%;
    color: #ccc;
    font-family: 'erabbit' !important;
    font-size: 32rpx;
    transform: translateY(-50%);
  }

  .withdrawal {
    width: 100vw;

    .withdrawal-top {
      padding: 0 40rpx;
      background-color: #fff;
      font-size: 24rpx;
      color: #999999;
    }

    .withdrawal-bottom {
      font-size: 24rpx;
      color: #999999;

      .withdrawal-Way {
        position: relative;
        padding: 20rpx 20rpx;
        background-color: #fff;
        margin-top: 20rpx;
        color: #000;
        font-size: 26rpx;
      }

      .withdrawal-text {
        margin-top: 20rpx;
        font-size: 22rpx;
        color: #999;
      }

      text {
        display: inline-block;
        padding: 20rpx;
        padding-bottom: 0;
        color: #343a40;
        font-weight: 700;
      }
    }
  }

  .button {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;
    background-color: #1e9fff;
    margin-top: 40rpx;
  }
</style>
